function initTexture(gl, u_sampler, imgSrc) {
    let texture = gl.createTexture();

    let img = new Image();

    img.onload = () => {
        loadTexture(gl, texture, u_sampler, img);
    }
    img.src = imgSrc
}

function loadTexture(gl, texture,  u_sampler, img) {
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1);
    gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
    
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, img);
    gl.uniform1i(u_sampler, 0);
    gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
}
let gl = getGlByCanvasId("canvas");
let program = getProgram();

// 顶点坐标和纹理坐标放在一个buffer里
let posAndTexPosData = new Float32Array([
    // 顶点        纹理
    -1, 1, 0.0, 1.0,
    -1, -1, 0.0, 0.0,
    1, 1, 1.0, 1.0,
    1, -1, 1.0, 0.0
]);
let perDataSize = posAndTexPosData.BYTES_PER_ELEMENT;

let commonBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, commonBuffer);
gl.bufferData(gl.ARRAY_BUFFER, posAndTexPosData, gl.STATIC_DRAW);

let a_position = gl.getAttribLocation(program, 'a_position');
let a_texture = gl.getAttribLocation(program, 'a_texture');
let u_sampler = gl.getUniformLocation(program, 'u_sampler')
let u_float = gl.getUniformLocation(program, "u_float");

gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, perDataSize * 4, 0);
gl.enableVertexAttribArray(a_position);
gl.vertexAttribPointer(a_texture, 2, gl.FLOAT, false, perDataSize * 4, perDataSize * 2);
gl.enableVertexAttribArray(a_texture);
gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
gl.clearColor(0.5, 0.7, 0.4, 1.0);
gl.useProgram(program);

let offset = 0;
function tick() {
    offset = offset + 0.01;
    gl.uniform1f(u_float, offset);
    initTexture(gl, u_sampler, '../resource/' + 'fengjing.jpeg');
    requestAnimationFrame(tick);
}

tick();